// px版本

export function RGStretching(e, type, box, box2, setBox) {
  console.log(setBox)
  const oBox = document.getElementsByClassName(box)[0] || box
  const oBox2 = document.getElementsByClassName(box2)[0] || box2
  if (type === 'topBottom') {
    e = e || window.event
    const y = e.clientY
    const oBoxH = oBox.offsetHeight
    const oBox2H = oBox2.offsetHeight
    document.onmousemove = function (e) {
      e = e || window.event
      const yy = e.clientY
      if (oBoxH + yy - y < 60 || oBox2H - yy + y < 60) {
        return
      }
      // oBox.style.height = oBoxH + yy - y + 'px'
      // oBox2.style.height = oBox2H - yy + y + 'px'
      setBox(oBoxH + yy - y + 'px', oBox2H - yy + y + 'px')
      return false
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
    if (e.preventDefault) {
      e.preventDefault()
    }
  } else if (type === 'leftRight') {
    e = e || window.event
    const x = e.clientX
    const oBoxW = oBox.offsetWidth
    const oBox2W = oBox2.offsetWidth
    const arr = getNum(oBox.style.width)
    const arr2 = getNum(oBox2.style.width)
    document.onmousemove = function (e) {
      e = e || window.event
      const xx = e.clientX
      if (oBoxW + xx - x < 60 || oBox2W - xx + x < 60) {
        return
      }
      setBox(`calc(${arr[0]}% + ${arr[1] + xx - x}px)`, `calc(${arr2[0]}% + ${arr2[1] - xx + x}px)`)
      return false
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
    if (e.preventDefault) {
      e.preventDefault()
    }
  }
}

export function RGStretchingTouch(e, type, box, box2, setBox) {
  const oBox = document.getElementsByClassName(box)[0] || box
  const oBox2 = document.getElementsByClassName(box2)[0] || box2
  if (type === 'topBottom') {
    e = e || window.event
    const y = e.targetTouches[0].pageY
    const oBoxH = oBox.offsetHeight
    const oBox2H = oBox2.offsetHeight
    document.ontouchmove = function (e) {
      e = e || window.event
      const yy = e.targetTouches[0].pageY
      if (oBoxH + yy - y < 60 || oBox2H - yy + y < 60) {
        return
      }
      oBox.style.height = oBoxH + yy - y + 'px'
      oBox2.style.height = oBox2H - yy + y + 'px'
      return false
    }
    document.ontouchend = function () {
      document.ontouchmove = null
      document.ontouchend = null
    }
    if (e.preventDefault) {
      e.preventDefault()
    }
  } else if (type === 'leftRight') {
    e = e || window.event
    const x = e.targetTouches[0].pageX
    const oBoxW = oBox.offsetWidth
    const oBox2W = oBox2.offsetWidth
    const arr = getNum(oBox.style.width)
    const arr2 = getNum(oBox2.style.width)
    document.ontouchmove = function (e) {
      e = e || window.event
      const xx = e.targetTouches[0].pageX
      if (oBoxW + xx - x < 60 || oBox2W - xx + x < 60) {
        return
      }
      setBox(`calc(${arr[0]}% + ${arr[1] - xx + x}px)`, `calc(${arr2[0]}% + ${arr2[1] + xx - x}px)`)
      return false
    }
    document.ontouchend = function () {
      document.ontouchmove = null
      document.ontouchend = null
    }
    if (e.preventDefault) {
      e.preventDefault()
    }
  }
}

function getNum(str) {
  const num = str.match(/\d+(.\d+)?/g)
  const count = getCharCount(str, '-')
  return [parseFloat(num[0]), count === 1 ? -parseFloat(num[1]) : parseFloat(num[1])]
}

function getCharCount(str, char) {
  const regex = new RegExp(char, 'g') // 使用g表示整个字符串都要匹配
  const result = str.match(regex) //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
  const count = !result ? 0 : result.length
  return count
}
